<template>
  <el-card class="m-4 box-card" shadow="never">
    <div class="mb-4" style="align-items: center">
      <h4>
        确认详情 [id-{{ useResultInfoStoreHook().aqiMeasuredResult.aqimrId }}]
      </h4>
    </div>

    <!-- 显示步骤 -->
    <div class="animate__animated animate__fadeInLeft">
      <el-steps
        class="mt-2, mb-8"
        style="max-width: 6000px"
        :active="activeStep"
        align-center
        finish-status="success"
      >
        <el-step title="反馈" description="监督员发起反馈" />
        <el-step title="指派" description="管理员指派反馈任务" />
        <el-step title="检测" description="网格检测员实地检测数据" />
        <el-step title="完成" description="管理员审核发布数据" />
      </el-steps>
    </div>
    <!-- 详情信息表单 -->
    <el-divider content-position="left" border-style="dashed"
      ><h4 style="color: dimgrey">网格员信息</h4></el-divider
    >
    <el-descriptions class="mb-4" :column="3" size="default" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            网格员姓名
          </div>
        </template>
        {{ useResultInfoStoreHook().inspector.insName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle"><PriceTag /></el-icon>
            网格员ID
          </div>
        </template>
        {{ useResultInfoStoreHook().inspector.insId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            网格员电话
          </div>
        </template>
        {{ useResultInfoStoreHook().inspector.insTel }}
        <el-icon
          class="copy-btn"
          style="color: dodgerblue; margin-left: 8px"
          onmouseout="this.style.color='dodgerblue'"
          onmouseover="this.style.color='gray'"
          @click="copyPhone(`${useResultInfoStoreHook().inspector.insTel}`)"
          ><CopyDocument
        /></el-icon>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            家庭住址
          </div>
        </template>
        {{ useResultInfoStoreHook().inspector.insAddress }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left" border-style="dashed"
      ><h4 style="color: dimgrey">确认情况</h4></el-divider
    >
    <el-descriptions class="margin-top" :column="4" size="default" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            确认信息ID
          </div>
        </template>
        {{ useResultInfoStoreHook().aqiMeasuredResult.aqimrId
        }}<el-icon
          class="copy-btn"
          style="color: dodgerblue; margin-left: 8px"
          onmouseout="this.style.color='dodgerblue'"
          onmouseover="this.style.color='gray'"
          @click="
            copyPhone(`${useResultInfoStoreHook().aqiMeasuredResult.aqimrId}`)
          "
          ><CopyDocument
        /></el-icon>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            省份
          </div>
        </template>
        {{ useResultInfoStoreHook().provinceName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            城市
          </div>
        </template>
        {{ useResultInfoStoreHook().cityName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            状态
          </div>
        </template>
        <el-tag
          size="default"
          :type="
            useResultInfoStoreHook().aqiMeasuredResult.aqimrState === 1
              ? 'success'
              : 'danger'
          "
          :effect="
            useResultInfoStoreHook().aqiMeasuredResult.aqimrState === 1
              ? 'light'
              : 'dark'
          "
        >
          {{
            useResultInfoStoreHook().aqiMeasuredResult.aqimrState === 1
              ? "正常"
              : "危险"
          }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Clock />
            </el-icon>
            确认时间
          </div>
        </template>
        {{
          formatResultTime(
            useResultInfoStoreHook().aqiMeasuredResult.aqimrMeasuredTime
          )
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            具体地址
          </div>
        </template>
        {{ useResultInfoStoreHook().aqiMeasuredResult.aqimrAddress }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="mt-4" :column="1" size="default" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Odometer />
            </el-icon>
            空气质量指数AQI
          </div>
        </template>
        <el-tag size="large" type="danger" class="mr-4"
          >{{ convertLevelToChinese(useResultInfoStoreHook().aqi.aqiLevel) }}
          {{ " " + useResultInfoStoreHook().aqi.aqiLevelDes }}</el-tag
        >
        <el-tag size="large" type="warning" class="mr-4"
          >{{ useResultInfoStoreHook().aqi.aqiHealthImpact }}
        </el-tag>
        <el-tag size="large" type="info"
          >{{ useResultInfoStoreHook().aqi.aqiTakeMeasure }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            情况描述
          </div>
        </template>
        {{ useResultInfoStoreHook().aqiMeasuredResult.aqimrInfo }}
      </el-descriptions-item>
    </el-descriptions>

    <el-divider content-position="left" border-style="dashed"
      ><h4 style="color: dimgrey">反馈人详情</h4></el-divider
    >
    <el-descriptions class="mb-4" :column="3" size="default" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            监督员姓名
          </div>
        </template>
        {{ useResultInfoStoreHook().monitor.monName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle"><PriceTag /></el-icon>
            监督员出生日期
          </div>
        </template>
        {{ useResultInfoStoreHook().monitor.monBirthday.substring(0, 10) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            监督员电话
          </div>
        </template>
        {{ useResultInfoStoreHook().monitor.monTel }}
        <el-icon
          class="copy-btn"
          style="color: dodgerblue; margin-left: 8px"
          onmouseout="this.style.color='dodgerblue'"
          onmouseover="this.style.color='gray'"
          @click="copyPhone(`${useResultInfoStoreHook().monitor.monTel}`)"
          ><CopyDocument
        /></el-icon>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            家庭住址
          </div>
        </template>
        {{ useResultInfoStoreHook().monitor.monAddress }}
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import type { PlusColumn } from "plus-pro-components";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  PriceTag,
  CopyDocument,
  Clock,
  Odometer,
  FullScreen
} from "@element-plus/icons-vue";
import ClipboardJS from "clipboard";
import { message } from "@/utils/message";
import { getKeyList } from "@pureadmin/utils";
import { useResultInfoStoreHook } from "@/store/modules/resultInfo";
import { getGridProvinceById } from "@/api/gridProvince";
import { getGridCityById } from "@/api/gridCity";
import { getAqiGradeByLevel } from "@/api/aqiGrade";
import { getAqiMeasuredDetail } from "@/api/aqiMeasuredResult";
import "animate.css";
import router from "@/router";
import { string } from "vue-types";

defineOptions({
  name: "ResultInfo"
});

const activeStep = 3;
const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px"
  };
  return {
    marginRight: marginMap["default"] || marginMap.default
  };
});

function copyPhone(data: string) {
  let clipboard = new ClipboardJS(".copy-btn", {
    text: () => {
      //返回需要复制的字符串
      return data;
    }
  });
  clipboard.on("success", () => {
    clipboard.destroy();
  });
  clipboard.on("error", () => {
    clipboard.destroy();
  });

  message("已复制", { type: "success" });
}

// 处理时间格式的函数
const formatResultTime = timeString => {
  const date = new Date(timeString);
  const formattedTime = date
    .toISOString()
    .replace(/T/, " ")
    .replace(/\.\d+Z/, "");
  return formattedTime;
};

onMounted(() => {
  // urlList.value = useFeedbackInfoStoreHook().imageUrl;
  setTimeout(() => {
    activeStep.value = 1;
  }, 500);
});

// 定义一个辅助函数，将数字转换为中文
const convertLevelToChinese = (level: number): string => {
  switch (level) {
    case 1:
      return "一";
    case 2:
      return "二";
    case 3:
      return "三";
    case 4:
      return "四";
    case 5:
      return "五";
    case 6:
      return "六";
    default:
      return "";
  }
};
</script>

<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}
.animate__animated.animate__fadeInLeft {
  --animate-duration: 1s;
}
</style>
